<!doctype html>
<html>

<head>
   <meta charset="UTF-8">
   <title>在当前显示区范围内实现点不到的小方块</title>
   <style>
      div {
         position: fixed;
         width: 100px;
         height: 100px;
         background-image: url(img/xiaoxin.gif);
         background-size: 100%;
      }
   </style>

</head>

<body>
   <div id="pop"></div>
   <script>
      var pop = document.getElementById("pop");
      var b_top = 0;
      var b_left = 0;
      window.onmousemove = function (e) {
         if ((e.clientX >= b_left && e.clientX <= b_left + 100) &&
            (e.clientY >= b_top && e.clientY <= b_top + 100)) {
            console.log(e.clientX, e.clientY);
            b_top = parseInt(Math.random() * (innerHeight - 100));
            b_left = parseInt(Math.random() * (innerWidth - 100));
            pop.style.left = b_left + "px";
            pop.style.top = b_top + "px";
         }

      }
   </script>
</body>

</html>